<template>
  <div id="driverCompany_box">
    <div class="driver_top">
      <div class="driver_hx"></div>
      <div class="driver_one">
        <ul>
          <li class="ative">1</li>
          <li class="ative">2</li>
          <li>3</li>
          <li class="four">4</li>
        </ul>
      </div>
      <div class="driver_two">
        <ul>
          <li>
            <p class="text_ative">身份信息</p>
          </li>
          <li>
            <p class="text_ative">公司信息</p>
          </li>
          <li>
            <p>车辆信息</p>
          </li>
          <li>
            <p>从业信息</p>
          </li>
        </ul>
      </div>
    </div>
    <div style="margin-top:20px">
      <md-field>
        <md-field-item name title="车牌所属地区" align="right" arrow="arrow-right" :value="chooseCity" @click="chooseCityBtn"></md-field-item>
        <md-field-item
          name
          title="出租车公司"
          align="right"
          arrow="arrow-right"
          :value="chooseCompany"
          @click="getTxFirmInfo"
        ></md-field-item>
      </md-field>
    </div>
    <!-- <md-popup v-model="isPopupShow" position="bottom">
            <md-popup-title-bar title="选择省市区/县" ok-text="确认" cancel-text="取消" @confirm="getregion()" @cancel="hidePopUp()"></md-popup-title-bar>
            <div class="pop_box">
                <div class="pop_box_hd">
                    <ul>
                        <li @click="provinceBtn">
                            <p>{{provinceName}}</p>
                            <span>
                                <img src="@/assets/imgs/sanjiao.png">
                            </span>
                        </li>
                        <li @click="cityBtn">
                            <p>{{cityName}}</p>
                            <span>
                                <img src="@/assets/imgs/sanjiao.png">
                            </span>
                        </li>
                        <li @click="countyBtn">
                            <p>{{countyName}}</p>
                            <span>
                                <img src="@/assets/imgs/sanjiao.png">
                            </span>
                        </li>
                    </ul>
                </div>
                <div class="city_list" v-show="Isprovince">
                    <ul>
                        <li v-for="(item, index) in provinceData" :key="index" @click="getprovince(item.name,item.adcode)">{{item.name}}</li>
                    </ul>
                </div>
                <div class="city_list" v-show="Iscity">
                    <ul>
                        <li v-for="(item, index) in cityData" :key="index" @click="getcity(item.name,item.adcode)">{{item.name}}</li>
                    </ul>
                </div>
                <div class="city_list" v-show="Iscounty">
                    <ul>
                        <li
                            v-for="(item, index) in countyData"
                            :key="index"
                            @click="getcounty(item.name,item.adcode,index)"
                            :class="{active:Isactive==index}"
                        >{{item.name}}</li>
                    </ul>
                </div>
            </div>
    </md-popup>-->
    <!--选择城市-->
    <md-picker
      ref="cityTypePicker"
      v-model="isPopupShow"
      :data="cityTypeData"
      :cols="3"
      :default-index="cityIndexData"
      is-cascade
      title="司机地区"
      @confirm="cityTypeBtnConfirm"
    ></md-picker>
    <div class="companynextBtn" @click="companynextBtn">
      <p>下一步</p>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
import { Icon, Field, FieldItem, Toast, Dialog, Picker, Popup, PopupTitleBar } from 'mand-mobile';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Utils from '@/common/pakjUtils';
import http from '@/common/http';
import https from 'axios';
export default {
  components: {
    [Icon.name]: Icon,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Picker.name]: Picker,
    [FieldItem.name]: FieldItem,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar
  },
  data() {
    return {
      title: '完善公司信息',
      isshowCompany: false,
      chooseCity: '选择所属地区',
      chooseCompany: '选择出租车公司',
      cpmpanyId: '', // 公司Id
      isPopupShow: false,
      Isprovince: true,
      Iscity: false,
      cityIndexData: [],
      cityTypeData: [],
      provinceData: [],
      cityData: [],
      countyData: [],
      Iscounty: false,
      provinceName: '省',
      cityName: '市',
      countyName: '区/县',
      provinceCode: '',
      cityCode: '',
      countyCode: '',
      districtSearch: null,
      Isactive: ''
    };
  },
  mounted() {
    // this.AMPDistrictSearch('中国');
    let province = '';
    let city = '';
    let country = '';
    https.get('/json/province.json').then(res => {
      province = res.data;
      https.get('/json/city.json').then(res => {
        city = res.data;
        https.get('/json/country.json').then(res => {
          country = res.data;
          province.forEach((p, i) => {
            p.children = city[p.value];
            city[p.value].forEach((c, j) => {
              c.children = country[c.value];
            });
          });
          this.cityTypeData.push(province);
          this.cityIndexData = [0, 0, 0];
        });
      });
    });
    // 公司信息回显
    if (this.$route.query.driverId) {
      if (sessionStorage['driverCompanyName'] && sessionStorage['driverCompanyFirmId']) {
        this.chooseCompany = sessionStorage['driverCompanyName'].substring(0, 15); // 出租车公司
        this.cpmpanyId = sessionStorage['driverCompanyFirmId'];
        this.chooseCity = sessionStorage['chooseCity'];
      } else {
        var params = {
          driverId: this.$route.query.driverId
        };
        Loading.show();
        http.post('/pakj/txDriver/getDriverFirmInfo', params).then(res => {
          Loading.hide();
          console.log(res.data);
          if (res.data.code === '000000') {
            var province = '';
            var city = '';
            var country = '';
            if (!res.data.data.province) {
              this.chooseCity = '选择所属地区';
            } else {
              province = res.data.data.province.split('_')[1];
              this.chooseCity = province + ' ' + city + ' ' + country; // 省市区
              sessionStorage['province'] = res.data.data.province;
            }
            if (res.data.data.city) {
              city = res.data.data.city.split('_')[1];
              this.chooseCity = province + ' ' + city + ' ' + country; // 省市区
              sessionStorage['city'] = res.data.data.city;
            }
            if (res.data.data.country) {
              country = res.data.data.country.split('_')[1];
              sessionStorage['county'] = res.data.data.country;
            }
            sessionStorage['chooseCity'] = this.chooseCity;
            if (!res.data.data.firmName) {
              this.chooseCompany = '选择出租车公司';
            } else {
              this.chooseCompany = res.data.data.firmName.substring(0, 15); // 出租车公司
            }
            if (res.data.data.firmId) {
              this.cpmpanyId = res.data.data.firmId;
            }
          } else {
            Dialog.alert({
              title: '提示',
              content: res.data.msg,
              confirmText: '确定'
            });
          }
        });
      }
    }
  },
  methods: {
    // AMPDistrictSearch(type) {
    //     AMap.plugin('AMap.DistrictSearch', () => {
    //         this.districtSearch = new AMap.DistrictSearch({
    //             // 关键字对应的行政区级别，country表示国家
    //             level: 'country',
    //             //  显示下级行政区级数，1表示返回下一级行政区
    //             subdistrict: 1
    //         });
    //         // 搜索所有省/直辖市信息
    //         this.districtSearch.search(type, (status, result) => {
    //             console.log(result);
    //             if (result.districtList[0].level === 'country') {
    //                 this.provinceData = result.districtList[0].districtList;
    //             } else if (result.districtList[0].level === 'province') {
    //                 this.cityData = result.districtList[0].districtList;
    //             } else if (result.districtList[0].level === 'city') {
    //                 this.countyData = result.districtList[0].districtList;
    //                 // this.countyName = this.countyData[0].name;
    //                 // this.countyCode = this.countyData[0].adcode;
    //             }
    //         });
    //     });
    // },
    // 拉起选择省市区/县
    // chooseCityBtn() {
    //     this.isPopupShow = true;
    //     this.Isprovince = true;
    //     this.Iscity = false;
    //     this.Iscounty = false;
    // },
    // 选择省
    // provinceBtn() {
    //     this.Isprovince = true;
    //     this.Iscity = false;
    //     this.Iscounty = false;
    // },
    // 获取省
    // getprovince(name, provinceCode) {
    //     this.provinceName = name;
    //     this.provinceCode = provinceCode;
    //     this.Isprovince = false;
    //     this.Iscity = true;
    //     this.cityName = '市';
    //     this.countyName = '区/县';
    //     this.cityData = [];
    //     this.countyData = [];
    //     this.cityCode = '';
    //     this.countyCode = '';
    //     this.AMPDistrictSearch(provinceCode);
    // },
    // 选择市
    // cityBtn() {
    //     if (this.cityData.length === 0) {
    //         Toast({
    //             content: '请选择省',
    //             duration: 3000,
    //             hasMask: true
    //         });
    //         return false;
    //     }
    //     this.Isprovince = false;
    //     this.Iscity = true;
    //     this.Iscounty = false;
    // },
    // 获取市
    // getcity(name, cityCode) {
    //     this.cityName = name;
    //     this.cityCode = cityCode;
    //     this.Iscity = false;
    //     this.Iscounty = true;
    //     this.countyName = '区/县';
    //     this.countyData = [];
    //     this.countyCode = '';
    //     this.Isactive = '';
    //     this.AMPDistrictSearch(cityCode);
    // },
    // 选择区县
    // countyBtn() {
    //     if (this.countyData.length === 0) {
    //         Toast({
    //             content: '请选择市',
    //             duration: 3000,
    //             hasMask: true
    //         });
    //         return false;
    //     }
    //     this.Isprovince = false;
    //     this.Iscity = false;
    //     this.Iscounty = true;
    // },
    // 获取区县
    // getcounty(name, countyCode, index) {
    //     this.countyName = name;
    //     this.countyCode = countyCode;
    //     this.Isactive = index;
    // },
    // getregion() {
    //     if (this.cityName === '市') {
    //         Toast({
    //             content: '请选择市',
    //             duration: 3000,
    //             hasMask: true
    //         });
    //         return false;
    //     }
    //     var provinceName = this.provinceName;
    //     var cityName = this.cityName;
    //     var countyName = this.countyName;
    //     this.chooseCity = provinceName.substring(0, 5) + ' ' + cityName.substring(0, 5) + ' ' + countyName.substring(0, 5);
    //     var province = 'province' + '_' + this.provinceName + '_' + this.provinceCode;
    //     var city = 'city' + '_' + this.cityName + '_' + this.cityCode;
    //     var country = '';
    //     if (this.countyName === '区/县') {
    //         country = '';
    //         this.chooseCity = provinceName.substring(0, 5) + ' ' + cityName.substring(0, 5);
    //     } else {
    //         country = 'district' + '_' + this.countyName + '_' + this.countyCode;
    //     }
    //     sessionStorage['province'] = province;
    //     sessionStorage['city'] = city;
    //     sessionStorage['county'] = country;
    //     sessionStorage['chooseCity'] = this.chooseCity;
    //     this.provinceName = '省';
    //     this.cityName = '市';
    //     this.countyName = '区/县';
    //     // 每次清除出租车公司名字
    //     this.chooseCompany = '选择出租车公司';
    //     this.isPopupShow = false;
    //     this.Iscounty = false;
    // },
    chooseCityBtn() {
      this.isPopupShow = true;
    },
    // 获取城市
    cityTypeBtnConfirm() {
      let values = this.$refs.cityTypePicker.getColumnValues();
      this.provinceName = values[0].text;
      this.provinceCode = values[0].value.substring(0, 6);
      this.cityName = values[1].text;
      this.cityCode = values[1].value.substring(0, 6);
      this.countyName = values[2].text;
      this.countyCode = values[2].value.substring(0, 6);
      this.chooseCity =
        this.provinceName.substring(0, 5) +
        ' ' +
        this.cityName.substring(0, 5) +
        ' ' +
        this.countyName.substring(0, 5);
      var provinceRegion = 'province' + '_' + this.provinceName + '_' + this.provinceCode;
      var cityRegion = 'city' + '_' + this.cityName + '_' + this.cityCode;
      var countryRegion = 'district' + '_' + this.countyName + '_' + this.countyCode;
      sessionStorage['province'] = provinceRegion;
      sessionStorage['city'] = cityRegion;
      sessionStorage['county'] = countryRegion;
      sessionStorage['chooseCity'] = this.chooseCity;
      // 每次清除出租车公司名字
      this.chooseCompany = '选择出租车公司';
      this.isPopupShow = false;
    },
    hidePopUp() {
      this.isPopupShow = false;
    },
    companynextBtn() {
      if (this.chooseCity === '选择所属地区') {
        Toast({
          content: '请选择所属地区',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (this.chooseCompany === '选择出租车公司') {
        Toast({
          content: '请选择出租车公司',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      let params = {
        driverId: this.$route.query.driverId,
        firmId: this.cpmpanyId // 司机ID
      };
      Loading.show();
      http.post('/pakj/txDriver/saveDriverFirmInfo', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          this.$router.push({
            name: 'driverVehicle',
            query: {
              driverId: this.$route.query.driverId,
              driverphone: this.$route.query.driverphone
            }
          });
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    getTxFirmInfo() {
      // 获取出租车公司
      if (this.chooseCity === '选择所属地区') {
        Toast({
          content: '请选择所属地区',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      this.$router.push({
        name: 'driverTxFirmInfo',
        query: {
          driverId: this.$route.query.driverId,
          driverphone: this.$route.query.driverphone
        }
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h6 {
  display: block;
  font-size: 22px;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 400;
}

#driverCompany_box {
  height: 100vh;
  background-color: color-primary-background;

  .driver_top {
    height: 180px;
    background: rgba(42, 42, 51, 1);
    padding: 0px 30px;
    font-size: 26px;
  }

  .driver_hx {
    height: 12px;
    width: 25%;
    background-color: #FF6917;
    position: absolute;
    top: 55px;
    left: 80px;
  }

  .driver_one {
    padding-top: 55px;
    margin: 0px 30px;
  }

  .driver_one ul {
    display: flex;
    justify-content: space-between;
    background-color: #E0E0E0;
    height: 12px;
  }

  .driver_one ul li {
    width: 40px;
    height: 40px;
    background-color: #B8B8B8;
    line-height: 40px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    top: -15px;
    right: 2px;
  }

  .driver_one ul li.four {
    left: 4px;
  }

  .driver_one ul li.ative {
    background-color: #FF6917;
    color: #fff;
    border-radius: 50%;
  }

  .driver_two {
    margin-top: 30px;
  }

  .driver_two ul {
    display: flex;
    justify-content: space-between;
    color: #fff;
  }

  .driver_two ul li p.text_ative {
    color: #FF6917;
  }

  .companynextBtn {
    margin: 40px 20px 0px 20px;
  }

  .companynextBtn p {
    height: 98px;
    line-height: 98px;
    background-color: #FF6917;
    font-size: 36px;
    color: #fff;
    text-align: center;
    border-radius: 10px;
  }

  .pop_box {
    background-color: #fff;
    height: 700px;
  }

  .pop_box_hd {
    border-top: solid 1px #EFEFEF;
    height: 80px;
    border-bottom: solid 1px #EFEFEF;
  }

  .pop_box_hd ul li {
    width: 33.33%;
    float: left;
    font-size: 28px;
    color: #333;
    list-style: none;
    line-height: 80px;
    position: relative;
  }

  .pop_box_hd ul li p {
    margin-left: 40px;
    width: 210px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .pop_box_hd ul li span {
    position: absolute;
    top: 8px;
    right: 10px;
  }

  .pop_box_hd ul li img {
    width: 30px;
  }

  .city_list {
    height: 560px;
    width: 100vw;
    overflow: hidden;
    overflow-y: auto;
  }

  .city_list ul li {
    border-bottom: solid 1px #EFEFEF;
    height: 80px;
    line-height: 80px;
    padding: 0px 40px;
    fotn-size: 28px;
    color: #333;
  }

  .city_list ul li.active {
    color: #ff6917;
  }
}
</style>
